<template>
  <div class="react_con" ref="conRef">
    <el-button type="warning" class="react_start" v-if="!isStart" @click="startGame"
      >开始</el-button
    >
    <span class="react_warning" v-if="isWarning">注意...</span>

    <div
      class="react_circle"
      v-if="circleShow"
      :style="{ top: `${cirtop}px`, left: `${cirleft}px` }"
      @click="endGame"
    ></div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const isStart = ref(false)
const isWarning = ref(false)
const circleShow = ref(false)
const conRef = ref()
const cirtop = ref(0)
const cirleft = ref(0)
const begintimer = ref(0)
const endtimer = ref(0)

const startGame = () => {
  isStart.value = true //隐藏开始
  isWarning.value = true //显示注意字样
  circleShow.value = false //隐藏小球
  setTimeout(() => {
    isWarning.value = false //隐藏注意字样
    console.log(conRef.value.offsetWidth, 'ww')
    console.log(conRef.value.offsetHeight, 'hww')
    const wh = 100
    // 获取 0 到 max 的随机整数（包含 0，包含 max）
    cirtop.value = Math.floor(Math.random() * (conRef.value.offsetHeight - wh + 1))
    cirleft.value = Math.floor(Math.random() * (conRef.value.offsetWidth - wh + 1))
    console.log(cirtop.value, cirleft.value, 'left.value')
    circleShow.value = true //展示小球
    begintimer.value = new Date().getTime()
  }, Math.floor(Math.random() * (5000 + 1)))
}

const endGame = () => {
  endtimer.value = new Date().getTime()
  ElMessageBox.alert(`用时: ${Number(endtimer.value) - Number(begintimer.value)}毫秒`, '好厉害!', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '再来一次',
    callback: (action) => {
      startGame()
    },
  })
}
</script>
<style scoped lang="scss">
.react_con {
  width: 100%;
  height: 100%;
  position: relative;

  .react_start {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    font-size: 29px;
  }

  .react_warning {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: #ff8a2d;
    position: absolute;
  }

  .react_circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #359afd;
    position: absolute;
    cursor: pointer;
  }
}
</style>